<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/Page.css" rel="stylesheet" />
	</head>

	<style>
		*{
		font-family:PingFang-SC-Bold;
	}
	.mui-content{
    width: 100%;
    height: 100%;
    display: inline-block;
	background: #FFFFFF;
	}
	
	.body{
		 padding-top: 20px;
		 box-sizing: border-box;
			  background: -webkit-linear-gradient(#ffffff, #F0F0F0); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(#ffffff, #F0F0F0); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(#ffffff, #F0F0F0); /* Firefox 3.6 - 15 */
		background: linear-gradient(#ffffff, #F0F0F0); /* 标准的语法 */
		
	}
	
	
		.hedactive{
			color:rgba(254,105,101,1)!important;
			border-bottom: 2px solid  rgba(254,105,101,1); 
		}
	  .heads{
		  position: relative;
		  width: 100%;
		  height: 50px;
		  display: flex;
		  justify-content: space-around;
		  border-bottom: 1px solid rgba(153,153,153,0.6)!important;
		  padding-top: 8px;
		  box-sizing: border-box;
	  }
		.dan{
			padding: 0px  0px;
			line-height: 36px;
			box-sizing: border-box;
			font-size:16px;
	        font-weight:bold;
	        height:36px;
	        color:rgba(51,51,51,1);
		}
		
	.left,.right{
			padding: 15px 15px;
			box-sizing: border-box;
			position: relative;
			float: left;
			width: 100%;
			
		}
		
		.fenye{
			width: 100%;
			text-align: center;
			padding-top: 10px;
			position: relative;
			float: left;
		}
		
		.leftmaindan{
			position: relative;
			float:left;
			width: 100%;
			padding-bottom: 15px;
			box-sizing: border-box;
			margin-top: 17px;
		}
		
		.danyi{
			position: relative;
			float: left;
			width: 50px;
			display: flex;
		}
		
		.danyi  img{
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	
		.daner{
			position: relative;
			float: left;
			width: calc(100% - 60px);
            margin-left: 10px;       	
			padding-bottom: 10px;
            border-bottom: 1px solid rgba(208,208,208,1);
		}
		
	   .leftmain>.leftmaindan:last-child>.daner{
			border-bottom:none;
		}
	    .daneryi{
			width: 100%;
			height: 50px;
			position: relative;
			float: left;
		}
		
		.daneryi  >div:nth-child(1){
			position: relative;
			float: left;
            width: 100%;
			height: 25px;
			line-height: 25px;
			color:rgba(51,51,51,1); 
			font-size:16px;		
            font-family:PingFang-SC-Bold;
            font-weight:bold;
		}
		.daneryi  >div:nth-child(2){
			position: relative;
			float: left;
			 width: 100%;
			height: 25px;
		}
		
		.daneryi  >div:nth-child(2)>div:nth-child(1){
			position: relative;
			width: calc(100% -  100px);
			height: 100%;
			float: left;
			font-size:14px;
            font-weight:500;
            color:rgba(153,153,153,1);
		}
		
		.daneryi  >div:nth-child(2)>div:nth-child(2){
			position: relative;
			width:  100px;
			height: 100%;
			float: right;
			text-align: right;
			font-size:14px;
		    font-weight:500;
		    color:rgba(153,153,153,1);
		}
		
		.daneryi  >div:nth-child(2)>div:nth-child(1)>div{
				padding: 0 2px;
				box-sizing: border-box;
				display: inline-block;
				float: left;
				color:rgba(153,153,153,1);
				position: relative;
			}
		.daneryi  >div:nth-child(2)>div:nth-child(1)>div:nth-child(even)>span{
			position: relative;
		    top: -5px;
		}
		
		
		.danerer{
			width: 100%;
			height: 93px;
			position: relative;
			float: left;
            background:linear-gradient(112deg,rgba(254,220,220,1) 0%,rgba(226,239,248,1) 100%);
			padding-top: 18px;
			box-sizing: border-box;
		}
		
		.chenyuan{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 40px;
		    height:15px;
		    line-height: 15px;
		    font-size: 10px;
			opacity: 0.7;
		    background:linear-gradient(112deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
		    border-radius:0px 0px 8px 0px;	
			text-align: center;
		}
		 .chengyuan{
			 position: relative;
			 float: left;
             width: 57px;
			 height: 100%;
		 }
		 
		 .chengyuan>img:nth-child(1){
			 position: relative;
			 float: left;
             width: 57px;
			 height: 57px;
			 border-radius: 50%;
		 }
		  .chengyuan>img:nth-child(2){
			  width: 15px;
			  height: 15px;
			  position: absolute;
			  right: 0px;
			  top: 0px;
		  }
		 
		 .newqun{
			 position: fixed;
			 width: 90px;
			 height: 32px;
			 right: 15px;
			 top: 243px;
			 text-align: center;
			 font-size:15px;
			 line-height: 32px;
font-weight:500;
color:rgba(255,255,255,1);
background:linear-gradient(0deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
box-shadow:0px 3px 4px 0px rgba(253,124,117,0.34);
border-radius:32px 0px 0px 32px;
		 }
		 
</style>

	<body>
		<div id="body" class="mui-content">
			<div class="heads">
				<div index="0" class="dan  hedactive">社区</div>
				<div index="1" class="dan">我的群</div>
			</div>

			<div class="left" id="left">

				<div class="leftmain" id="myzuobian">
					<!-- <div  class="leftmaindan">
						<div class="danyi"><img src="image/qunmin.png" /></div>
						<div class="daner">
							<div class="daneryi">
								<div>群名称</div>
								<div>
									<div>
										<div>搞笑</div>
										<div><span>.</span></div>
										<div>娱乐</div>
									</div>
									<div>39人参与</div>
								</div>
							</div>
							<div class="danerer"  >
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chenyuan">群成员</div>
							</div>


							<div>
							</div>

						</div>
					</div> -->
					
					
						<!-- <div  class="leftmaindan">
						<div class="danyi"><img src="image/qunmin.png" /></div>
						<div class="daner">
							<div class="daneryi">
								<div>群名称</div>
								<div>
									<div>
										<div>搞笑</div>
										<div><span>.</span></div>
										<div>娱乐</div>
									</div>
									<div>39人参与</div>
								</div>
							</div>
							<div class="danerer">
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chenyuan">群成员</div>
							</div>
					
					
							<div>
							</div>
					
						</div>
					</div> -->
					
					
						<!-- <div  class="leftmaindan">
						<div class="danyi"><img src="image/qunmin.png" /></div>
						<div class="daner">
							<div class="daneryi">
								<div>群名称</div>
								<div>
									<div>
										<div>搞笑</div>
										<div><span>.</span></div>
										<div>娱乐</div>
									</div>
									<div>39人参与</div>
								</div>
							</div>
							<div class="danerer">
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chenyuan">群成员</div>
							</div>
					
					
							<div>
							</div>
					
						</div>
					</div> -->
					
				</div>


				<div class="fenye">
					<div class="pages">
					</div>
				</div>
			</div>


	<div class="right" id="right"  style="display: none;">
	<div class="leftmain" id='myyoubian'>
					<!-- <div  class="leftmaindan">
						<div class="danyi"><img src="image/qunmin.png" /></div>
						<div class="daner">
							<div class="daneryi">
								<div>群名称</div>
								<div>
									<div>
										<div>搞笑</div>
										<div><span>.</span></div>
										<div>娱乐</div>
									</div>
									<div>39人参与</div>
								</div>
							</div>
							<div class="danerer">
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chenyuan">群成员</div>
							</div>


							<div>
							</div>

						</div>
					</div> -->
					
					
						<!-- <div  class="leftmaindan">
						<div class="danyi"><img src="image/qunmin.png" /></div>
						<div class="daner">
							<div class="daneryi">
								<div>群名称</div>
								<div>
									<div>
										<div>搞笑</div>
										<div><span>.</span></div>
										<div>娱乐</div>
									</div>
									<div>39人参与</div>
								</div>
							</div>
							<div class="danerer">
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chenyuan">群成员</div>
							</div>
					
					
							<div>
							</div>
					
						</div>
					</div> -->
					
					
						<!-- <div  class="leftmaindan">
						<div class="danyi"><img src="image/qunmin.png" /></div>
						<div class="daner">
							<div class="daneryi">
								<div>群名称</div>
								<div>
									<div>
										<div>搞笑</div>
										<div><span>.</span></div>
										<div>娱乐</div>
									</div>
									<div>39人参与</div>
								</div>
							</div>
							<div class="danerer">
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nv.png" /></div>
								<div class="chengyuan"><img src="image/touxiang.png" /><img   src="image/nan.png" /></div>
								<div class="chenyuan">群成员</div>
							</div>
							<div>
							</div>
						</div>
					</div> -->
				</div>
<div class="newqun">新建群聊</div>

			</div>




		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/Page.js"></script>
	<script type="text/javascript">
		window.addEventListener("refresh", function (e) {
			location.reload();
			});
			
			
			window.addEventListener("dddd", function (e) {
				location.reload();
				});
			window.addEventListener("newrest", function (e) {
				location.reload();
				});
				
		mui.plusReady(function(){
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			user = JSON.parse(user);
			// mui.alert(url);
			mui.post(url+'/juyou/Grouping/getmygrop',{token:user.token},function(res){
				// mui.toast(res.msg)
				if(res.code==200){
					var str = '';
					mui.each(res.data.qun.data,function(i,v){
						str +='<div  class="leftmaindan">'+
								'<div class="danyi"><img src="'+v.group_owner.touxiang+'" /></div>'+
								'<div class="daner">'+
									'<div class="daneryi">'+
										'<div>'+v.name+'</div>'+
										'<div>'+
											'<div>';
											mui.each(v.label,function(is,vs){
												if(is==(v.label.length-1)){
													str+='<div>'+vs+'</div>';
												}else{
													str+='<div>'+vs+'</div>'+
												'<div><span>.</span></div>';
												}
											})
											str+='</div>'+
											'<div>'+v.zong+'人参与</div>'+
										'</div>'+
									'</div>'+
									'<div class="danerer" data-qunid="'+v.id+'" >';
									mui.each(v.chengyuan,function(is,vs){
										if(vs.user.sex=='男'){
											str+='<div class="chengyuan"><img src="'+vs.user.touxiang+'" /><img   src="image/nan.png" /></div>';
										}else{
											str+='<div class="chengyuan"><img src="'+vs.user.touxiang+'" /><img   src="image/nv.png" /></div>';
										}
									
									})
										str+='<div class="chenyuan">群成员</div>'+
									'</div>'+
									'<div>'+
									'</div>'+
								'</div>'+
							'</div>';
					})
					$("#myzuobian").append(str);
					str = '';
					mui.each(res.data.my,function(i,v){
						str+='<div  class="leftmaindan">'+
								'<div class="danyi"><img src="'+v.group_owner.touxiang+'" /></div>'+
								'<div class="daner">'+
									'<div class="daneryi">'+
										'<div>'+v.name+'</div>'+
										'<div>'+
											'<div>';
											mui.each(v.label,function(is,vs){
												if(is==(v.label.length-1)){
													str+='<div>'+vs+'</div>';
												}else{
													str+='<div>'+vs+'</div>'+
												'<div><span>.</span></div>';
												}
											})
											str+='</div>'+
											'<div>'+v.zong+'人参与</div>'+
										'</div>'+
									'</div>'+
									'<div class="danerer" data-qunid="'+v.id+'" >';
									mui.each(v.chengyuan,function(is,vs){
										if(vs.user.sex=='男'){
											str+='<div class="chengyuan"><img src="'+vs.user.touxiang+'" /><img   src="image/nan.png" /></div>';
										}else{
											str+='<div class="chengyuan"><img src="'+vs.user.touxiang+'" /><img   src="image/nv.png" /></div>';
										}
									
									})
										str+='<div class="chenyuan">群成员</div>'+
									'</div>'+


									'<div>'+
									'</div>'+

								'</div>'+
							'</div>';
					})
					$("#myyoubian").append(str);
					
					var newpage = new Page($(".pages").eq(0), {
						count: res.data.qun.total,
						limit: 10,
						upper: true,
					}, function(tiaojian) {
						mui.post(url+'/juyou/Grouping/getqunlist',{token:user.token,page:tiaojian.page},function(res){
							// mui.toast(res.data.length);
							if(res.code==200){
								var str = '';
								mui.each(res.data,function(i,v){
									str +='<div  class="leftmaindan">'+
											'<div class="danyi"><img src="'+v.group_owner.touxiang+'" /></div>'+
											'<div class="daner">'+
												'<div class="daneryi">'+
													'<div>'+v.name+'</div>'+
													'<div>'+
														'<div>';
														mui.each(v.label,function(is,vs){
															if(is==(v.label.length-1)){
																str+='<div>'+vs+'</div>';
															}else{
																str+='<div>'+vs+'</div>'+
															'<div><span>.</span></div>';
															}
														})
														str+='</div>'+
														'<div>'+v.zong+'人参与</div>'+
													'</div>'+
												'</div>'+
												'<div class="danerer" data-qunid="'+v.id+'" >';
												mui.each(v.chengyuan,function(is,vs){
													if(vs.user.sex=='男'){
														str+='<div class="chengyuan"><img src="'+vs.user.touxiang+'" /><img   src="image/nan.png" /></div>';
													}else{
														str+='<div class="chengyuan"><img src="'+vs.user.touxiang+'" /><img   src="image/nv.png" /></div>';
													}
												
												})
													str+='<div class="chenyuan">群成员</div>'+
												'</div>'+
												'<div>'+
												'</div>'+
											'</div>'+
										'</div>';
								});
								$("#myzuobian").empty();
								$("#myzuobian").append(str);
							}else{
								mui.toast(res.msg);
							}
						})
					});
					
					
					
					mui.init();
					
					
					
						
						
					mui(".heads").on("tap", ".dan", function() {
							$(this).addClass("hedactive");
							$(this).siblings().removeClass("hedactive")
							var  value=$(this).attr("index");
							if(value==0){
								$(".left").css("display","block");
						$(".right").css("display","none")
							}else{
								$(".left").css("display","none");
								$(".right").css("display","block")
							}
						});
								//点击左边跳转到群详情
						mui("#left").on("tap", ".danerer", function() {
							var qunid = $(this).attr('data-qunid');
							// mui.alert(qunid);
							plus.nativeUI.showWaiting();
							mui.post(url+'/juyou/Grouping/jianche',{token:user.token,qunid:qunid},function(res){
								plus.nativeUI.closeWaiting();
								// mui.alert(res.msg);
								if(res.code==200){
									mui.openWindow({
										url:'./sub4/qunliaosub4.html',
										id:"qunliaosub4.html",
										extras: {
										//参数
										qunid:qunid
										},
										show: {
											autoShow: true, //页面loaded事件发生后自动显示，默认为true
											aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
											duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
										},
										waiting: {
											autoShow: true, //自动显示等待框，默认为true
											title: '正在加载...', //等待对话框上显示的提示内容
										}
									})
								}else if(res.code==202){
									mui.confirm('你还没有加入该群，是否加入?','提示',['取消','确定'],function(e){
										if(e.index){
											plus.nativeUI.showWaiting();
											mui.post(url+'/juyou/Grouping/jiaruqun',{token:user.token,qunid:qunid},function(ress){
												plus.nativeUI.closeWaiting();
												mui.toast(ress.msg);
												if(ress.code==200){
													setTimeout(function(){
														mui.openWindow({
															url:'./sub4/qunliaosub4.html',
															id:"qunliaosub4.html",
															extras: {
															//参数
															qunid:qunid
															},
															show: {
																autoShow: true, //页面loaded事件发生后自动显示，默认为true
																aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
																duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
															},
															waiting: {
																autoShow: true, //自动显示等待框，默认为true
																title: '正在加载...', //等待对话框上显示的提示内容
															}
														})
													},500)
												}
											})
										}
									})
								}else{
									mui.toast(res.msg);
								}
							})
							
								
						})
						
									//点击右边跳转到群详情
						mui("#right").on("tap", ".danerer", function() {
							var qunid = $(this).attr('data-qunid');
								mui.openWindow({
								url:'./sub4/qunliaosub4.html',
								id:"qunliaosub4.html",
								extras: {
								//参数
								qunid:qunid
								},
								show: {
									autoShow: true, //页面loaded事件发生后自动显示，默认为true
									aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
									duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						})
						//x新建群聊
							mui("#right").on("tap", ".newqun", function() {
								mui.openWindow({
								url:'./sub4/qunnewsub4.html',
								id:"./sub4/qunnewsub4.html",
								extras: {
								//参数
								},
								show: {
									autoShow: true, //页面loaded事件发生后自动显示，默认为true
									aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
									duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						})
				}else{
					mui.toast(res.msg);
				}
			})
	
		})
		
		
	</script>
</html>
